import React, { useEffect, useRef } from "react";
import styles from "./index.module.scss";
import { useScriptTag } from "@vueuse/core";

declare const AMap: any;

const AMapContainer: React.FC = () => {
    let map: any = null;
    const mapContainer = useRef<HTMLDivElement>(null);
    const initPosition = [116.397402, 39.909163]; // 初始坐标

    useEffect(() => {
        init();
    }, []);

    const init = async () => {
        if (!mapContainer.current) return
        const { load } = useScriptTag(
            "https://webapi.amap.com/maps?v=2.0&key=0f2c6f59bebba4cc642e9a4654d5da81"
        );
        await load();
        map = new AMap.Map(mapContainer.current,
            {
                viewMode: "3D", // 是否为3D地图模式
                zoom: 15, // 初始化地图级别
                center: initPosition, // 初始化地图中心点位置 
                layers: [new AMap.TileLayer], //设置图层,可设置成包含一个或多个图层的数组
                resizeEnable: true
            });
        // 标记
        let marker = new AMap.Marker({
            position: initPosition // 基点位置
        });
        // 地图添加标记
        map.add(marker);
    }


    return (
        <div
            id="container"
            ref={mapContainer}
            className={styles.container}
        ></div>
    );
}

export default AMapContainer;